<template>
  <view class="home">
    <!-- prescription -->
    <!-- 头部 start -->
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      leftBtnShow="true"
      :backgroundImage="backgroundImage"
      :border="false"
      leftIcon="back"
      color="#fff"
      @clickLeft="clickLeft"
    >
       <view class="uni-title">{{title}}</view>
    </uni-nav-bar>
    <!-- 头部 end -->

    <!-- 内容 start -->
    <view class="content" :class="status===0?'unpaid':'pay'" :style="{height: (offsetHeight-offsetTop-10)+'px'}">
      <view class="form-box" v-if="!showChuFang">
        <view class="status" :class="'status'+orderStatus" v-if="orderStatus">
          {{orderStatusLabel(orderStatus)}}
        </view>
        <view class="iconBg">
          <view class="icon iconfont icon-yishengchufang"></view>
        </view>
        <view class="top-box">
          <view class="flex">
            <view class="label">处方单号</view>
            <view class="value">
              <text>{{chufangInfo.prescriptionId}}</text>
              <text class="icon iconfont icon-erweima" style="color: red;padding-left: 10rpx; color: #2458A4;" @click="linkToErWeiMa"></text>
              </view>
          </view>
          <view class="flex">
            <view class="label">医院</view>
            <view class="value">{{chufangInfo.hospitalName}}</view>
          </view>
           <view class="flex">
            <view class="label">就诊人</view>
            <view class="value">{{chufangInfo.patient_name}}</view>
          </view>
        </view>
       <view class="top-box" :style="{display: boxshow?'block':'none'}">
         <view class="flex">
            <view class="label">诊断</view>
            <view class="value">{{chufangInfo.diagnoseName}}</view>
          </view>
          <view class="flex">
            <view class="label">处方样品</view>
            <view class="value">共{{drugsList.length}}种</view>
          </view>
           <view class="flex">
            <view class="label">医生</view>
            <view class="value">{{chufangInfo.doctorName}}</view>
          </view>
           <view class="flex">
            <view class="label">开具时间</view>
            <view class="value">{{moment(chufangInfo.creatAt)}}</view>
          </view>
       </view>
       <view class="flex" style="padding: 10rpx 0;"  @click="boxshow = !boxshow">
        <view class="text-box flex">
          <view>{{ boxshow ? '收起' : '展开' }}</view>
          <!-- <view class="icon iconfont icon-xiajiantou"></view> -->
          <view style="padding:0 8rpx;color: rgba(36,88,164,0.8)" :class="[boxshow ? 'xiajiantou' : 'shangjiantou', 'icon iconfont icon-xiajiantou']"></view>
        </view>
       </view>
      </view>
      <view class="drugs-box">
        <view class="box-inner">
          <view class="drugs-list" v-for="(item,index) in drugsList" :key="index">
            <view class="flex flex-start" style="padding-bottom: 16rpx;">
              <view> {{item.drugGenericName}}</view>
              <view class="prescription-count">处方量{{item.amount}}</view>
            </view>
            <view class="flex flex-start flex-direction-col">
              <view class="des" v-if="item.drugRoute">
                {{item.drugRoute}}
              </view>
                <view class="des">
                {{item.spec}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="drugs-box delay-box" v-if="orderStatus == 2||orderStatus == 3||orderStatus == 4">
        <view class="box-inner flex" @click="toSF">
          <view>
            物流信息
          </view>
          <view class="date">
            <view class="icon iconfont icon-youjiantou"></view>
          </view>
        </view>
      </view>
      <view class="flex">
        <text text type="text" @click="showClick" style="font-size: 20rpx; color: #999"  v-if="orderStatus == 2|| orderStatus == 3">退款申请</text>
      </view>
      <view class="explain">发票或者其他问题，请联系 13889110151</view>
      <!-- TODO 需要改 -->
      <view class="btn-bottom" v-if="status == '10' || status == '20' || status == '-10' || orderStatus=='1'">
      <!-- <view class="btn-bottom" v-if="1==1"> -->
        <Button size="large" type="primary" @click="linkToDetails">去支付</Button>
      </view>
    </view>
    <!-- 头部信息 start -->
    <!-- 头部信息 end -->

  </view>
</template>

<script>
import hccmStore from "@/common/hccm-store.js"
import mRequest from "@/api/home"
import hccmConfig from "@/common/hccm-config.js"
import dict from '@/static/js/dict.json'
import moment from '@/static/js/moment'
export default {
  data() {
    return {
      offsetTop: hccmStore.getOffsetTop(), //安全高度
      offsetHeight:  hccmStore.getOffsetHeight(), //安全高度
      userInfo:  hccmStore.getUser(), //安全高度
      prescriptionId: '',
      status: '10',
      orderStatus:"",
      chufangInfo: {},
      drugsList:[],
      boxshow:false,
      yfzOrderId: '',
      orderId: '',
      hospId: '',
      showChuFang: false,
      orderDes: {},
      hospTotalPrice: 0,
    }
  },
  computed:{
    title(){
      return this.orderStatusLabel(this.orderStatus)
    },
    backgroundImage(){
      return this.status === 0 ? 'linear-gradient(#3388FF, #6197f8)':'linear-gradient(#2D67F0, #3388FF)'
    },
  },
  onLoad(options) {
    this.prescriptionId = options.prescriptionId
    this.showChuFang = options.showChuFang || false
    this.hospId = options.hospId
    this.orderId = options.orderId || ''
    if(options.orderDes){
      this.orderDes = options.orderDes
    }
    if(this.orderId){
      this.orderStatus = options.orderStatus
      this.status = options.status
      this.getOrderDetail()
    }else{
      this.chufangInfo = JSON.parse(options.chufangInfo)
      this.status = this.chufangInfo.status
      this.orderStatus = this.chufangInfo.orderStatus
      this.getOrderByPreIdAndHospIds()
      this.getPrescriptionDetail()
    }
    console.log(this.chufangInfo)
  },
  onShow() {
  },
  methods: {
    getOrderDetail(){
      let params = {
        orderId: this.orderId
      }
      mRequest.getOrderDetail(params).then(
        res => {
          console.log(res,3333)
          this.drugsList = res.responseData
          this.hospTotalPrice = 0
          res.responseData.map(item=>{
            this.hospTotalPrice += (Number(item.amount)* Number(item.hospPrice))
          })
        },
        error => {
          console.log(error)
        }
      )
    },
    showClick(){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确认退款吗？',
        success: function (res) {
          if (res.confirm) {
            that.refunds()
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 退费
    refunds(){
      let params = {
        orderId: this.orderId,
      }
      mRequest.refunds(params).then(
        res => {
          uni.redirectTo({
            //关闭当前页面，跳转到应用内的某个页面。
            url:'/pages/home-main/home-main'
          });
          console.log(res,333)
        },
        error => {
          console.log(error)
        },
      )
    },
    toSF(){
      if(this.chufangInfo && this.chufangInfo.hisprescriptionId){
        uni.navigateTo({
          url: `/pages/drug-des/drug-des?yfzOrderId=${this.yfzOrderId}&prescriptionId=${this.prescriptionId}&chufangInfo=${JSON.stringify(this.chufangInfo)}`,
          success: res => {},
          fail: () => {},
          complete: () => {},
        })
      }else{
        uni.navigateTo({
          url: `/pages/drug-des/drug-des?orderDes=${this.orderDes}&yfzOrderId=${this.yfzOrderId}&prescriptionId=${this.prescriptionId}&hospId=${this.hospId}&orderId=${this.orderId}&drugsList=${JSON.stringify(this.drugsList)}`,
          success: res => {},
          fail: () => {},
          complete: () => {},
        })
      }
    },
    // 查询订单（先看看有没有生成订单，有的话直接赋值）
    getOrderByPreIdAndHospIds () {
      let params = {
        currentPage: 1,
        pageSize: 100,
        prescriptionIds: this.prescriptionId.split(','),
        hospId: this.chufangInfo.hospId
      }
      mRequest.getOrderByPreIdAndHospIds(params).then(
        res => {
          let aaa = []
          for (let i = 0; i < res.responseData.length; i++) {
            if(res.responseData[i].prescriptionId == this.prescriptionId){
              aaa= aaa.concat(res.responseData[i])
            }
          }
          if(aaa.length > 0){
            aaa.map((item) => {
              if (item.orderStatus == this.orderStatus) {
                this.yfzOrderId = item.yfzOrderId
                this.orderId = item.orderId
              }
            })
          }
        },
        error => {
          console.log(error)
        }
      )
    },
    statusLabel(val){
      return  dict.statusList.filter(item=>{
        return val == item.id
      })[0].title
    },
    orderStatusLabel(val){
      return  dict.orderStatusList.filter(item=>{
        return val == item.id
      })[0].title
    },
    moment(val){
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 返回
    clickLeft() {
      uni.navigateBack()
    },
    // 获取处方详情
    getPrescriptionDetail(){
      let params = {
        prescriptionId: this.prescriptionId,
      }
      mRequest.getPrescriptionDetail(params).then(
        res => {
          this.drugsList = res.responseData
        },
        error => {
          console.log(error)
        },
      )
    },
    linkToDetails(){
      if(this.chufangInfo && this.chufangInfo.hisprescriptionId){
        uni.navigateTo({
          url: `/pages/order/order?prescriptionId=${this.chufangInfo.hisprescriptionId}&action=order&hospTotalPrice=${this.chufangInfo.hospTotalPrice}&hospId=${this.chufangInfo.hospId}&status=${this.chufangInfo.status}`,
          // url: `/pages/order/order?prescriptionId=202339231&hospTotalPrice=${this.chufangInfo.hospTotalPrice}&hospId=${this.chufangInfo.hospId}`,
          // url: `/pages/order/order?prescriptionId=202339240&hospId=H21010200543`,
          success: res => {},
          fail: () => {},
          complete: () => {},
        })
      }else{
        uni.navigateTo({
          url: `/pages/order/order?prescriptionId=${this.prescriptionId}&hospId=${this.hospId}&status=${this.status}&drugsList=${JSON.stringify(this.drugsList)}&hospTotalPrice=${this.hospTotalPrice}`,
          success: res => {},
          fail: () => {},
          complete: () => {},
        })
      }
    },
    linkToErWeiMa(){
      uni.navigateTo({
        url: `/pages/erweima/erweima?prescriptionId=${this.chufangInfo.prescriptionId}`,
        success: res => {},
        fail: () => {},
        complete: () => {},
      })
    },
  },
}
</script>

<style lang="scss">
@import "@/static/css/index.scss";
// begin
.home {
  height: 100%;
  overflow: hidden;
  .content{
    box-sizing: border-box;
    overflow: auto;
    padding-bottom: 220rpx;
    box-sizing: border-box;
    .form-box{
      margin: 30rpx;
      padding: 20rpx;
      background: #fff;
      border-radius: 20rpx;
      position: relative;
      .status{
        position: absolute;
        top: 24rpx;
        right: 0;
        z-index: 1;
        padding: 14rpx 26rpx 14rpx 40rpx;
        border-radius: 30rpx 0 0 30rpx;
        color: #fff;
        font-size: 24rpx;
      }
      .status0{
        background: #ED5E5E;
      }
      .iconBg{
        position: absolute;
        bottom: 20rpx;
        right: 30rpx;
        z-index: 1;
        .icon{
          font-size: 120rpx;
          color: rgba(51,136,255,0.1);
        }
      }
      .text-box{
        color: #2458A4;
        font-size: 24rpx;
        z-index: 100;
      }
      .top-box{
        .flex{
          color: #333333;
          font-size: 28rpx;
          padding: 14rpx 0;
          .label{
            width: 140rpx;
            color: #777777;
          }
          .value{
            flex:1;
            color: #000;
          }
        }
      }
    }
    .drugs-box{
      background: #F6F6F6;
      padding: 30rpx 30rpx;
      min-height: 100rpx;
      border-radius: 30rpx 30rpx 0 0;
      .box-inner{
        background: #fff;
        padding: 0 24rpx;
        box-shadow: 0 1px 6px #ccc;
        border-radius: 20rpx;
      }
      .drugs-list{
        border-bottom: 1px solid #ECECEC;
        padding: 32rpx 0;
        .prescription-count{
          margin-left: 12rpx;
          background: #E5FFF2;
          color: #2EB273;
          font-size: 22rpx;
          height: 40rpx;
          line-height: 38rpx;
          padding: 0 16rpx;
          border-radius: 20rpx;
        }
        .des{
          color: #999999;
          font-size: 24rpx;
          padding: 8rpx 0;
        }
      }
      .drugs-list:last-of-type{
        border-bottom: none;
       }
    }
    .delay-box{
      padding-top: 16rpx;
      border-radius: 0;
      .box-inner{
        justify-content: space-between;
        padding: 30rpx 24rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #000;
        .date{
          color: #3388FF;
        }
      }
    }
  }
  .unpaid{
    background-image: linear-gradient(#6197f8 0%,#F6F6F6 40%, #F6F6F6 50%, #F6F6F6 100%);
  }
  .pay{
    background-image: linear-gradient(#3388FF 0%, #F6F6F6 40%,#F6F6F6 50%, #F6F6F6 100%);
  }
}
.draw-enter-active, .draw-leave-active {
  transition: all 1s ease;
}
.draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
.shangjiantou{
  transform: rotate(0deg);
}
.xiajiantou{
  transform: rotate(180deg);
}
</style>
